<template>
  <div class="body-editor">
    <el-radio-group v-model="body.type" @change="onTypeChange">
      <el-radio label="none">无</el-radio>
      <el-radio label="raw">Raw</el-radio>
      <el-radio label="json">JSON</el-radio>
      <el-radio label="formData">Form Data</el-radio>
      <el-radio label="urlencoded">URL Encoded</el-radio>
    </el-radio-group>

    <div class="body-content" v-if="body.type !== 'none'">
      <div v-if="body.type === 'raw'" class="raw-editor">
        <el-input
          type="textarea"
          v-model="body.raw"
          :rows="10"
          placeholder="请输入原始请求体内容"
          @input="updateBody"
        />
      </div>

      <div v-if="body.type === 'json'" class="json-editor">
        <el-input
          type="textarea"
          v-model="body.json"
          :rows="10"
          placeholder='{"key": "value"}'
          @input="updateBody"
        />
        <el-button
          size="small"
          style="margin-top: 10px"
          @click="formatJson"
        >
          格式化 JSON
        </el-button>
      </div>

      <div v-if="body.type === 'formData'" class="form-data-editor">
        <el-table :data="body.formData" style="width: 100%">
          <el-table-column width="40">
            <template slot-scope="scope">
              <el-checkbox v-model="scope.row.enabled" />
            </template>
          </el-table-column>
          
          <el-table-column prop="key" label="键">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.key"
                placeholder="键"
                size="small"
                @input="updateBody"
              />
            </template>
          </el-table-column>
          
          <el-table-column prop="value" label="值">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.value"
                placeholder="值"
                size="small"
                @input="updateBody"
              />
            </template>
          </el-table-column>
          
          <el-table-column width="80" label="操作">
            <template slot-scope="scope">
              <el-button
                type="text"
                size="small"
                @click="removeFormDataItem(scope.$index)"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        
        <el-button
          type="text"
          size="small"
          @click="addFormDataItem"
        >
          <i class="el-icon-plus"></i> 添加字段
        </el-button>
      </div>

      <div v-if="body.type === 'urlencoded'" class="urlencoded-editor">
        <el-table :data="body.urlencoded" style="width: 100%">
          <el-table-column width="40">
            <template slot-scope="scope">
              <el-checkbox v-model="scope.row.enabled" />
            </template>
          </el-table-column>
          
          <el-table-column prop="key" label="键">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.key"
                placeholder="键"
                size="small"
                @input="updateBody"
              />
            </template>
          </el-table-column>
          
          <el-table-column prop="value" label="值">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.value"
                placeholder="值"
                size="small"
                @input="updateBody"
              />
            </template>
          </el-table-column>
          
          <el-table-column width="80" label="操作">
            <template slot-scope="scope">
              <el-button
                type="text"
                size="small"
                @click="removeUrlencodedItem(scope.$index)"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        
        <el-button
          type="text"
          size="small"
          @click="addUrlencodedItem"
        >
          <i class="el-icon-plus"></i> 添加字段
        </el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'BodyEditor',
  props: {
    body: {
      type: Object,
      default: () => ({
        type: 'none',
        raw: '',
        json: '',
        formData: [],
        urlencoded: []
      })
    }
  },
  methods: {
    onTypeChange() {
      this.updateBody()
    },
    
    updateBody() {
      this.$emit('update', this.body)
    },
    
    formatJson() {
      try {
        const parsed = JSON.parse(this.body.json)
        this.body.json = JSON.stringify(parsed, null, 2)
        this.updateBody()
      } catch (e) {
        this.$message.error('JSON 格式错误')
      }
    },
    
    addFormDataItem() {
      if (!this.body.formData) {
        this.body.formData = []
      }
      this.body.formData.push({ key: '', value: '', enabled: true })
      this.updateBody()
    },
    
    removeFormDataItem(index) {
      this.body.formData.splice(index, 1)
      this.updateBody()
    },
    
    addUrlencodedItem() {
      if (!this.body.urlencoded) {
        this.body.urlencoded = []
      }
      this.body.urlencoded.push({ key: '', value: '', enabled: true })
      this.updateBody()
    },
    
    removeUrlencodedItem(index) {
      this.body.urlencoded.splice(index, 1)
      this.updateBody()
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../../../styles/variables.scss';

.body-editor {
  .body-content {
    margin-top: $spacing-medium;
  }
}
</style>